<template>
	<view>
		<view v-if="cart.length!==0">
			<ljy-address :address='address'></ljy-address>

			<view class="cart_title">
				<text class="iconfont icon-gouwuche"> 购物车</text>
			</view>

			<view>
				<ljy-goods v-for="(item,index) in cart" :key="index" :goods='item' :showCheck='true' :showNum='true'
					:allowLongTap='true' @changeNum='changeNum' @changechecked="changechecked"></ljy-goods>
			</view>
			<ljy-settle :buttonText="'结算'" :showAllCheck='true' :cartData='cart'
				@changeAllCheck='changeAllCheck'></ljy-settle>
		</view>
		<view class="cart-default" v-else>
			<image src="../../static/cart_empty.png" mode="widthFix"></image>
			<text>还没有商品哦~</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cart: [],
				address: {}
			}
		},
		onShow() {
			this.cart = uni.getStorageSync('cart') || [];
			this.address = uni.getStorageSync('address') || {};
		},

		methods: {
			changeAllCheck(e) {
				this.cart.forEach(v => v.checked = e);
				uni.setStorageSync('cart', this.cart);
			},
			changechecked(e) {
				let index = this.cart.findIndex(v => v.goods_id == e.goods_id);
				this.cart[index].checked = e.checked;
				uni.setStorageSync('cart', this.cart);
			},

			changeNum(e) {
				let index = this.cart.findIndex(v => v.goods_id == e.goods_id);
				if (e.cartNum === 0) {
					this.cart.splice(index, 1)
				} else {
					this.cart[index].cartNum = e.cartNum;
				}

				uni.setStorageSync('cart', this.cart);
			},
		}
	}
</script>

<style lang="scss">
	.cart_title {
		padding: 0 25rpx;
		border-bottom: 1px solid #cecece;
		
		text {
			font-size: 50rpx;
			color: #D9557C;
		}
	}
	.cart-default {
		width: 750rpx;
		height: 750rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		image {
			width: 300rpx;
		}
		text {
			margin-top: 50rpx;
			font-size: 50rpx;
			color: #D9557C;
		}
	}
</style>